/*
 * @Description: 分货调整页面
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2020-10-21 17:30:52
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-04-25 16:47:02
 */
import React, { useMemo, useRef } from 'react';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import {
  Button,
  DataSet,
  DateTimePicker,
  MonthPicker,
  notification,
  Select,
  Table,
  TextField,
} from 'choerodon-ui/pro';
import { ButtonColor, FuncType } from 'choerodon-ui/pro/lib/button/enum';
import { useDataSet } from 'hzero-front/lib/utils/hooks';
import { DataSetProps } from 'choerodon-ui/pro/lib/data-set/DataSet';
import {
  ColumnLock,
  TableColumnTooltip,
} from 'choerodon-ui/pro/lib/table/enum';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import intl from 'utils/intl';
import querystring from 'querystring';

import { distributionAdjustmentDS } from '../../stores/distributionAdjustmentDS';
import { renderSort, addEnterCallBack } from '../../utils/utilsFun';
import CustomizeTableSearch from '@common/components/CustomizeTableSearch';
import formatterCollections from 'utils/intl/formatterCollections';

notification.config({
  duration: 3,
  placement: 'bottomRight',
});
interface propstype {
  dispatch: any;
}

const ClassPage: React.FC<propstype> = ({ dispatch }) => {
  const tableDS = useDataSet(() => new DataSet(distributionAdjustmentDS() as DataSetProps));

  const pageRef = useRef(null);
  // 添加按回车查询事件
  addEnterCallBack(tableDS, pageRef);

  const handleToDetail = record => {
    const id = record.get('id');
    dispatch(
      routerRedux.push({
        pathname: `/o2om/distribution-adjustment-create`,
        search: querystring.stringify({
          params: encodeURIComponent(JSON.stringify({id})),
        }),
      })
    );
  };

  const handleCreate = () => {
    dispatch(
      routerRedux.push({
        pathname: `/o2om/distribution-adjustment-create`,
      })
    );
  };

  const Columns = useMemo<any>(
    () => [
      {
        header: intl.get(`dji.otc.om.view.field.serialNumber`).d('序号'),
        width: 50,
        lock: true,
        renderer: ({ record }) => renderSort(record, tableDS),
      },
      {
        name: 'adjustmentCode',
        align: 'left',
        tooltip: TableColumnTooltip.always,
        lock: true,
        width: 150,
      },
      { name: 'adjustmentReason', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'adjustmentMonth', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'adjustmentType', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'businessGroupMeaning', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'adjustmentStatus', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'createdByAd', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'creationDate', align: 'left', tooltip: TableColumnTooltip.always },
      {
        header: intl.get('dji.otc.om.view.field.operationColumn').d('操作'),
        width: 150,
        lock: ColumnLock.right,
        command: ({ record }) => {
          return [
            <Button
              funcType={'flat' as FuncType}
              key="look"
              onClick={() => {
                handleToDetail(record);
              }}
            >
              <a key="look">{intl.get(`dji.otc.om.view.field.lookDetail`).d('查看明细')}</a>
            </Button>,
            <Button
              funcType={'flat' as FuncType}
              key="delete"
              onClick={() => {
                tableDS.delete(record);
              }}
            >
              <a key="delete">{intl.get(`dji.otc.om.view.button.delete`).d('删除')}</a>
            </Button>,
          ];
        },
      },
    ],
    []
  );

  return (
    <div ref={pageRef}>
      <PageHeaderWrapper
        title={intl.get('dji.otc.om.view.menu.distributionAdjustment').d('分货调整')}
        header={ 
          <Button onClick={() => handleCreate()} color={ButtonColor.primary} key="create" >
            {intl.get(`dji.otc.om.view.button.create`).d('新建')}
          </Button>
        }
      >
        <Table
          dataSet={tableDS}
          border
          queryFieldsLimit={3}
          columns={Columns}
          queryBar={props => (
            <CustomizeTableSearch
              elements={[
                <TextField name="adjustmentCode" key="adjustmentCode" />,
                <DateTimePicker name="dateObj" key="dateObj" />,
                <Select name="outAreaObj" key="outAreaObj" searchable />,
                <Select name="intoAreaObj" key="intoAreaObj" searchable />,
                <Select name="adjustmentType" key="adjustmentType" searchable />,
                <MonthPicker name="adjustmentMonth" key="adjustmentMonth" />,
                <Select name="adjustmentStatus" key="adjustmentStatus" searchable />,
                // <Cascader name="area" key="area" />,
              ]}
              // eslint-disable-next-line react/jsx-props-no-spreading
              {...props}
            />
          )}
        />
      </PageHeaderWrapper>
    </div>
  );
};

export default connect()(
  formatterCollections({
    code: 'dji.otc.om',
  })(ClassPage)
);